<template>
  <div class="echarts-basic-bar" id="basicBar"></div>
</template>
  
<script>
//import * as echarts from "echarts";
// 引入柱状图图表，图表后缀都为 Chart
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

export default {
  data() {
    return {
      //图表对象
      echartsObj: null,
    };
  },
  props: {
    data: Object,
  },
  mounted() {
  
    this.createdCharts({
      xAxis: {
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      series: {
        data: [
          {
            month: 1,
            value: 255,
          },
          {
            month: 2,
            value: 676,
          },
          {
            month: 3,
            value: 124,
          },
          {
            month: 4,
            value: 672,
          },
          {
            month: 5,
            value: 577,
          },
          {
            month: 6,
            value: 857,
          },
          {
            month: 7,
            value: 96,
          },
          {
            month: 8,
            value: 113,
          },
          {
            month: 9,
            value: 995,
          },
          {
            month: 10,
            value: 319,
          },
          {
            month: 11,
            value: 504,
          },
          {
            month: 12,
            value: 660,
          },
        ],
        name: "消耗数量",
      },
    });
  },
  methods: {
    /**
     * 数据初始化配置
     */
    createdCharts(data) {
      //const ec = echarts as any;
      this.echartsObj = echarts.init(document.getElementById("basicBar"));

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: data.xAxis.data,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: data.series.name,
            type: "bar",
            barWidth: "60%",
            data: data.series.data,
            backgroundStyle: {
              color: "rgba(111, 0, 232, 1)",
              borderColor: "red",
              borderWidth: 3,
            },
            itemStyle: {
              color: "rgba(9, 185, 249, 1)",
            },
          },
        ],
      };
      let self = this;
      //窗口大小改变
    //   window.addEventListener("resize", () => this.echartsObj.resize(), false);
       this.echartsObj.setOption(option);
    },

    unmounted() {
      //window.removeEventListener("resize", this.echartsObj.resize(), false);
    },
  },
};
</script>
  
<style lang="scss">
.echarts-basic-bar {
  height: 100%;
}
</style>